<template>
    <div style="width: 100%;">
        <div class="jingao" v-if="datalist.length == 0">
            <!-- <span>您暂时还没有发布任何表白哦!</span> -->
            <el-result icon="info" title="信息提示" subTitle="您暂时还没有发布任何表白哦">
                <template slot="extra">
                    <el-button type="primary" size="medium">前往发布</el-button>
                </template>
            </el-result>
        </div>
        <div class="content-container">
            <div class="bbq-item" v-for="(item, index) in datalist" :key="index">
                <div class="item-top" :style="`background-image: url(${item.images.split(',')[0]});`">
                    <div class="mask"></div>
                </div>
                <!-- 表白 信息 -->
                <div class="item-content">
                    <span class="title">标题：{{item.summary}}</span>
                    <span class="content">内容：{{item.content}}</span>
                </div>
                <!-- 发布人 信息 -->
                <div class="pubulish-info">
                    <div class="info-top">
                        <img class="info-avatar" :src="item.avatar">
                        <span class="info-nickname">{{ item.nickname }}</span>
                    </div>
                    <span class="info-datetime">{{ item.createTime }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {GETUSERBBQDATA} from "@/api/user"
export default {
    name: 'SchoolForumBbqgl',

    data() {
        return {
            datalist:[],
            fysj:{
                current:1,
                size:4
            }
        };
    },

    mounted() {
        this.init();
    },

    methods: {
        init(){
            this.getUserBBQDate()
        },
        // 获取用户专属表白墙数据
        getUserBBQDate(){
            GETUSERBBQDATA(this.fysj.current,this.fysj.size).then(res=>{
                this.datalist = res.list
                console.log(this.datalist);
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.jingao{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
        color:gray;
        font-size: 20px;
        font-weight: bold;
    }

}
.content-container{
    width: 100%;
    // border: 1px solid blue;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .bbq-item{
        background-color: rgba(255, 255, 255, 0.6);
        padding: 20px;
        margin-bottom: 20px;
        width: 46%;
        border-radius: 5px;
        .item-content{
            padding: 20px;
            padding-bottom:0px ;
            span{
                display: block;
            }
            .title{
                font-weight: bold;
                font-size: 22px;
            }
            .title:hover{
                color: rgb(159, 33, 33);
                text-decoration: underline;
                cursor: pointer;
            }
            .content{
                font-size: 15px;
                color: gray;
                margin-top: 10px;
            }
        }
        .item-top{
            height: 200px;
            background-position: center;
            background-size: cover;
            border-radius: 10px ;
            overflow: hidden;
        }
        .pubulish-info{
            padding: 20px;
            padding-bottom: 0px;
            display: flex;
            flex-flow: row;
            align-items: center;
            justify-content: space-between;
            .info-top{
                display: flex;
                align-items: center;
                .info-avatar{
                    width: 25px;
                    height: 25px;
                    border-radius:100% ;
                    background-color: white;
                }
                .info-nickname{
                    font-size: 15px;
                    font-weight: bold;
                }
            }
            .info-datetime{
                color: gray;
                font-size: 15px;
            }
        }
    }
}
.mask{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 44%, rgba(51, 51, 51, 0) 99%);
}
</style>